<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>公告管理</el-breadcrumb-item>
      <el-breadcrumb-item>公告列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="body">
      <div class="list">
        <el-row>
          <el-col :span="2">
            <div class="add">
              <el-button @click="toOpenAddDialog()" type="primary">
                <i class="el-icon-user"></i>
                添加
              </el-button>
            </div>
          </el-col>

          <el-col :span="4" :offset="1">
            <div>
              <el-input
                @keyup.native.enter="searchByKey"
                v-model="key"
                class="search-input"
                placeholder="请输入标题内容"
              ></el-input>
            </div>
          </el-col>
          <el-col :span="2" :offset="1">
            <div>
              <el-button @click="searchByKey" type="primary" icon="el-icon-search"></el-button>
            </div>
          </el-col>

          <el-col :span="14">
            <el-tooltip content="点击刷新" placement="top" effect="dark">
              <el-button
                active-value="1"
                inactive-value="0"
                @click="refreshTable"
                class="refresh"
                type="success"
                icon="el-icon-refresh"
                circle
              ></el-button>
            </el-tooltip>
          </el-col>
        </el-row>
      </div>

      <!-- 表格数据 -->
      <div class="tableData">
        <el-table stripe border :data="noticeData" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="公告内容：">
                  <el-card class="noticeNotice">
                    <p v-html="props.row.content"></p>
                  </el-card>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="title" label="标题" width="500"></el-table-column>
          <el-table-column align="center" sortable prop="updateTime" label="上次更新时间" width="180"></el-table-column>
          <el-table-column align="center" prop="publish" label="是否发布" width="180">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <el-switch
                  @change="updatePublish(scope.row)"
                  v-model="scope.row.publish"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="发布"
                  inactive-text="停用"
                ></el-switch>
              </div>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleEdit(scope.row)"
                type="primary"
                icon="el-icon-edit"
                circle
                size="small"
              ></el-button>
              <el-button
                @click="handleDelete(scope.row)"
                type="danger"
                icon="el-icon-delete"
                circle
                size="small"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div>
        <el-pagination
          v-show="isShowPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 修改对话框 -->
    <el-dialog
      :before-close="handleClose"
      width="70%"
      title="公告详情"
      :visible.sync="dialogUpdateVisible"
    >
      <el-form :model="notice" label-position="top">
        <el-form-item label="公告名称" label-width="200px">
          <el-input class="noticeName" v-model="notice.title" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="content" label="公告详情">
          <div class="edit_container">
            <quill-editor v-model="notice.content" ref="myQuillEditor" :options="editorOption"></quill-editor>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateNotice">修 改</el-button>
      </div>
    </el-dialog>

    <!-- 添加对话框 -->
    <el-dialog
      :before-close="handleClose"
      width="70%"
      title="添加公告"
      :visible.sync="dialogSaveVisible"
    >
      <el-form :model="notice" label-position="top">
        <el-form-item label="公告名称" label-width="200px">
          <el-input class="noticeName" v-model="newNotice.title" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="content" label="公告详情">
          <div class="edit_container">
            <quill-editor v-model="newNotice.content" ref="myQuillEditor" :options="editorOption"></quill-editor>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSaveVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveNotice">添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  name: "Notice",
  data() {
    return {
      noticeData: [
        {
          id: "666666",
          title: "王小虎666666666666666666666666",
          content: "上海市普陀区fsdfds冯老师的解耦if哦以佛教哦金沙江路 1516 弄",
          updateTime: "1997-12-10 12:10",
          publish: 1
        }
      ],
      key: "",
      currentPage: 1,
      limit: 5,
      total: 10,
      dialogUpdateVisible: false,
      dialogSaveVisible: false,
      notice: {},
      newNotice: {},
      noticeId: "",
      editorOption: {
        placeholder: "请在这里输入",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
            ["blockquote", "code-block"], //引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: "ordered" }, { list: "bullet" }], //列表
            [{ script: "sub" }, { script: "super" }], // 上下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ direction: "rtl" }], // 文本方向
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], //字体
            [{ align: [] }], //对齐方式
            ["clean"] //清除字体样式
          ]
        }
      },
      isShowPage: true
    };
  },
  methods: {
    updatePublish(row) {
      this.$http
        .put(`/notice/publish/${row.id}/${row.publish}`)
        .then(resp => {
          let { code, msg } = resp.data;
          if (code == 1) {
            this.$message.success(msg);
          } else {
            this.$message.warning(msg);
          }
          this.dialogUpdateVisible = false;
        })
        .catch(resp => {});
    },
    updateNotice() {
      this.notice.id = this.noticeId;
      this.$http
        .put(`/notice/entity`, this.notice)
        .then(resp => {
          let { code, msg } = resp.data;
          if (code == 1) {
            this.reload();
            this.$message.success(msg);
          } else {
            this.$message.warning(msg);
          }
          this.dialogUpdateVisible = false;
        })
        .catch(resp => {});
    },
    saveNotice() {
      this.$http
        .post(`/notice/entity`, this.newNotice)
        .then(resp => {
          let { code, msg } = resp.data;
          if (code == 1) {
            this.$message.success(msg);
          } else {
            this.$message.warning(msg);
          }
          this.dialogSaveVisible = false;
        })
        .catch(resp => {});
    },
    refreshTable() {
      this.reload();
      this.$message.success("已刷新");
    },
    handleEdit(row) {
      this.getNoticeById(row.id);
      this.dialogUpdateVisible = true;
    },
    getNoticeById(noticeId) {
      this.noticeId = noticeId;
      this.$http
        .get(`/notice/noAuthorize/all/id/${noticeId}`)
        .then(resp => {
          let { code, msg, data } = resp.data;
          if (code == 1) {
            this.notice = data.notice;
          } else {
            this.$message.info(msg);
          }
        })
        .catch(resp => {});
    },

    toOpenAddDialog() {
      this.dialogSaveVisible = true;
    },
    searchByKey() {
      this.$http
        .get(`/notice/noAuthorize/all/condition`, {
          params: {
            key: this.key
          }
        })
        .then(resp => {
          let { code, msg, data } = resp.data;
          if (code == 1) {
            this.noticeData = data.noticeList;
            this.isShowPage = false;
          } else {
            this.$message.warning(msg);
          }
        })
        .catch(resp => {});
    },
    handleSizeChange(limit) {
      this.getNoticeList(this.currentPage, limit);
    },
    handleCurrentChange(page) {
      this.getNoticeList(page, this.limit);
    },
    getNoticeList(page, size) {
      this.$http
        .get(`/notice/noAuthorize/queryPage/all/${page}/${size}`)
        .then(resp => {
          let { code, msg, data } = resp.data;
          if (code == 1) {
            this.noticeData = data.noticeList;
            this.total = data.total;
          } else {
            this.$message.info(msg);
          }
        })
        .catch(resp => {});
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleDelete(row) {
      this.$http
        .delete(`/notice/id/${row.id}`)
        .then(resp => {
          let { code, msg } = resp.data;
          if (code == 1) {
            this.$message.success(msg);
            this.getNoticeList(this.currentPage, this.limit);
          } else {
            this.$message.info(msg);
          }
        })
        .catch(resp => {});
    }
  },
  created() {
    this.getNoticeList(this.currentPage, this.limit);
  }
};
</script>

<style  scoped >
.list {
  margin-top: 25px;
  margin-left: 20px;
}
.refresh {
  float: right;
  margin-right: 5px;
}
.body {
  margin-top: 20px;
}
.el-breadcrumb {
  margin-top: 10px;
}
.tableData {
  margin-top: 20px;
}
.demo-table-expand {
  margin-right: 0;
  margin-bottom: 0;
  width: 95%;
}
.noticeName {
  width: 600px;
}
</style>